<script setup lang="ts">
import { onMounted, ref } from 'vue'
import Sortable from 'sortablejs'

const dragGroup1 = [
	{ id: '1-a', title: '1-a', disabled: true },
	{ id: '1-b', title: '1-b' },
	{ id: '1-c', title: '1-c' },
	{ id: '1-d', title: '1-d' },
	{ id: '1-e', title: '1-e' },
	{ id: '1-f', title: '1-f' },
]
const dragGroup2 = [
	{ id: '2-a', title: '2-a', disabled: true },
	{ id: '2-b', title: '2-b' },
	{ id: '2-c', title: '2-c' },
	{ id: '2-d', title: '2-d' },
	{ id: '2-e', title: '2-e' },
	{ id: '2-f', title: '2-f' },
]

const dragGroup1Ref = ref(null)
const dragGroup2Ref = ref(null)
const dragGroup1Ids = ref<string[]>([])
const dragGroup2Ids = ref<string[]>([])
const currenrtDragItemId = ref('')

onMounted(() => {
	dragGroup1Ids.value = dragGroup1.map((v) => v.id)
	dragGroup2Ids.value = dragGroup2.map((v) => v.id)
	const ops1 = {
		// dataIdAttr:'IdAttr',    // 设置id属性
		animation: 1000,
		chosenClass: 'chosenClass', // 选中时的样式
		// dragClass:'',              // 拖拽移动时样式
		draggable: '.draggable', // 可拖拽项的类名
		sort: true,
		// group: 'test',
		group: {
			name: 'test', // 相同组名之间的列表才能互相拖拽
			pull: 'clone', //是否允许拖出当前组，'clone | boolean' | ()=>'clone | boolean'
			// put: true, //是否允许拖入当前组, boolean | ()=>boolean'
			put: () => {
				if (dragGroup1Ids.value.includes(currenrtDragItemId.value)) return false
				return true
			},
		},
		//开始拖动，更多事件参考官网事件列表菜单项 https://www.itxst.com/sortablejs/vufafnen.html
		onStart: (evt: any) => {
			currenrtDragItemId.value = evt.clone.dataset.id //记录下用户操作的那一项
		},
		//拖动结束
		onEnd: (evt: any) => {
			// console.log(evt);
			evt.preventDefault();
			dragGroup1Ids.value = JSON.parse(JSON.stringify(sortable1.toArray())) //获取拖动后的排序
		},
		// 新增项时
		onAdd(evt: any) {
      dragGroup1Ids.value = JSON.parse(JSON.stringify(sortable1.toArray())) 
		},
	}
	const sortable1 = Sortable.create(dragGroup1Ref.value, ops1)

	const ops2 = {
		// dataIdAttr:'IdAttr',
		animation: 1000,
		// dragClass:'',
		chosenClass: 'chosenClass',
		draggable: '.draggable',
		sort: false,
		// group: 'test',
		group: {
			name: 'test',
			pull: 'clone',
			//  put: true,
			put: () => {
				//console.log(dragGroup2Ids.value,currenrtDragItemId.value)
				if (dragGroup2Ids.value.includes(currenrtDragItemId.value)) return false
				return true
			},
		},
		//开始拖动
		onStart: (evt: any) => {
			currenrtDragItemId.value = evt.clone.dataset.id
		},
		//拖动结束
		onEnd: (evt: any) => {
			// console.log(evt);
			evt.preventDefault();
			dragGroup2Ids.value = JSON.parse(JSON.stringify(sortable2.toArray())) //获取拖动后的排序，为 data-id[]
		},
		// 新增项时
		onAdd(evt: any) {
      dragGroup2Ids.value = JSON.parse(JSON.stringify(sortable2.toArray()))
		},
	}
	const sortable2 = Sortable.create(dragGroup2Ref.value, ops2)
})
</script>

<template>
	<p>sortablejs文档地址 https://www.itxst.com/sortablejs/mbe73qrv.html</p>
	<div class="dragBetweenList" style="margin: 20px 0; display: flex; justify-content: space-evenly">
		<div ref="dragGroup1Ref" class="dragGroup1 dragGroup" style="border: 1px solid black">
			<div
				:class="{ dragItem: true, draggable: !item.disabled }"
				:style="{ cursor: item.disabled ? 'unset' : 'move' }"
				v-for="item in dragGroup1"
				:key="item.id"
				:data-id="item.id"
			>
				{{ item.title }}
			</div>
		</div>
		<div ref="dragGroup2Ref" class="dragGroup2 dragGroup" style="border: 1px solid black">
			<div
				:class="{ dragItem: true, draggable: !item.disabled }"
				:style="{ cursor: item.disabled ? 'unset' : 'move' }"
				v-for="item in dragGroup2"
				:key="item.id"
				:data-id="item.id"
			>
				{{ item.title }}
			</div>
		</div>
	</div>
</template>

<style scoped>
.dragItem {
	padding: 10px 5px;
	margin: 10px 0;
	width: 200px;
	background-color: gray;
	user-select: none;
}
.chosenClass {
	background-color: greenyellow;
}
</style>
